let playThis = document.getElementById('playThis')
let audio = document.getElementById('source_audio')
let header = document.getElementsByTagName('header')[0]
let switchBtn = document.getElementById('switchBtn')
let musicName = document.getElementById('musicName')
let musicAuth = document.getElementById('musicAuth')
let musicCover = document.getElementById('musicCover')
let preBtn = document.getElementById('previous')
let nextBtn = document.getElementById('next')
let songProcess=document.querySelector('.songProcess')
let currentProcess = document.getElementById('currentProcess')
let yinliang=document.querySelector('.sound>.iconfont')
let soundProcess = document.querySelector('.sound').lastElementChild
let soundBtn = document.querySelector('.icon-yinliang')
let turnSound = document.querySelector('.turnSound')

// 动态添加类，改变页面布局
switchBtn.addEventListener('click', () => {
  header.classList.toggle('active')
  yinliang.classList.toggle('icon-yinliang')
})

//播放音乐
function playSong(){
  playThis.classList.remove('icon-bofang')
  playThis.classList.add('icon-zanting')
  audio.play()
}
//暂停音乐
function pauseSong(){
  playThis.classList.remove('icon-zanting')
  playThis.classList.add('icon-bofang')
  audio.pause()
}
// 播放按钮
function playMusic() {
  let playBtn = playThis.classList.contains('icon-bofang')
  if(playBtn){
    playSong()
  }else{
    pauseSong()
  }
}
playThis.addEventListener('click',playMusic)

//动态指定歌曲信息
let songsDetail=[
  {songName:'era', songAuth:'Resonance' },
  {songName:'soulsearch', songAuth:'volo'},
  {songName:'listen', songAuth:'said the key' },
];
function songsItemSelec(music){
  musicName.innerText=music.songName
  musicAuth.innerText=music.songAuth
  musicCover.src =`static/pic/${music.songName}.jpg`
  audio.src=`static/music/${music.songName}.m4a`
}
// 指定默认歌曲信息
currIndex=1
songsItemSelec(songsDetail[currIndex])

// 切换下一首
function switchNext(){
  currIndex++
  if (currIndex>=songsDetail.length) {
    currIndex = 0
  }
  songsItemSelec(songsDetail[currIndex])
  playSong()
}
// 切换上一首
function switchPre(){
  currIndex--
  if(currIndex<0){
    currIndex=songsDetail.length-1
  }
  songsItemSelec(songsDetail[currIndex])
  playSong()
}
nextBtn.addEventListener('click',switchNext)
preBtn.addEventListener('click',switchPre)

// 播放进度条
function currProcessBar() {
  let audioLength = audio.duration
  let playLength = audio.currentTime
  let currentPlay = playLength / audioLength * 100
  currentProcess.style.width = currentPlay + '%'
  currentProcess.style.backgroundColor = '#9dd6c5'
}
function currInitialBac() {
  currentProcess.style.backgroundColor = '#dadada'
}
audio.addEventListener('timeupdate',currProcessBar)
audio.addEventListener('loadstart', currInitialBac)
// 手动定义进度条
function setProcessBar(event) {
  let clickLength = event.offsetX
  let playWith = this.clientWidth
  audio.currentTime = audio.duration * (clickLength / playWith)
}
songProcess.addEventListener('click', setProcessBar)
// 衔接播放下一首
audio.addEventListener('ended',switchNext)


// 动态显示音量条
soundBtn.addEventListener('click',()=>{soundProcess.classList.toggle('isnone')})

// 音量状态显示
audio.volume =0.5
function currVolumeBar(){
  turnSound.style.width = 100 * (audio.volume)+'%'
  turnSound.style.backgroundColor ='#9dd6c5'
}
audio.addEventListener('volumechange',currVolumeBar)
  
// 调节音量
function setVolumeBar(e){
  let volX=e.offsetX
  let volLength=this.clientWidth
  audio.volume=volX/volLength
}
soundProcess.addEventListener('click',setVolumeBar)